<template>
	<view class="container">
		<!-- <view :style="{height:this.show?'320rpx':''}">
			<diy-nav title="搜索"></diy-nav>
			<Search :showFilter="false"  ref="searchBarRef" @cancelSearch="cancelSearch"  @confirm1="doConfirm()"></Search>
		</view> -->
		<view style="position: fixed;width: 100%;background: #FFFFFF;z-index: 3;">
			<uni-search-bar   v-model="search_val" @focus="cancelSearch"  @confirm="doConfirm" @cancel="cancelSearch"  placeholder="请输入搜索关键词">
			</uni-search-bar>
		</view>
		<view v-if="show">
			<view class="s_history">
				<view class="s_stitle">搜索历史</view>
				<view class="s_sicon">
					<text @click="clickRemove()" class="cell-icon yticon icon-iconfontshanchu1" style="font-size: 36rpx;"></text>
				</view>
			</view>
			<view class="s_s_content">
				<view v-for="(item, index) in search_history_arr" :key="index" style="position: relative;float: left;" >
					<!-- <view class="s_s_content_child" :class="{remove: item._remove}" @click="entranContent(index)"	>{{item.title}}</view> -->
					<view class="s_s_content_child"  @click="entranContent(index)"	>{{item.title}}</view>
					<!-- <view v-if="show_remove" style="position: absolute;right: 22rpx;">×</view> -->
					<!-- <text @click="remove_s(index)"  class="cell-icon yticon icon-shanchu4" style="font-size: 20rpx;position: absolute;right: 22rpx;top:12rpx"></text> -->
				</view>
				
			</view>
		</view>
		<view v-else class="bottom-box" :style="{marginTop:this.list.length>0?'112rpx':'',minHeight:this.list.length>0?min_height:''}">
			
			<view v-if="loaded&&list.length==0" class="empty_data">暂无数据</view>
			<view v-else style="margin-top: 20rpx;">
				<view class="list-item" v-for="(item, index) in list" :key="index"
					@click="toDetailText(item.id)">
					<view class="list-img">
						<view class="status-tag" :style="{background: item.background}">{{item.status_tag}}</view>
						<image :src="item.discover"></image>
					</view>
					<view class="list-title">
						<view class="list-title-name">{{item.name}}</view>
						<view class="list-detail">
							<view style="flex: 1;">共{{item.course_section_info_count}}节</view>
							<view class="pad-r22">距您{{item.distance}}</view>
						</view>
						<view class="list-date">开课日期:{{item.course_time}}</view>
						<view class="list-op">
							<view class="font-w600">{{item.price}}</view>
							<view class="sign-coin-detail">
								签到最高可领{{item.score}}积分</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import DiyNav from "@/components/diy-nav-back"
	import Search from "@/components/search"
	import empty from "@/components/empty";
	import Api from '@/common/api'
	export default {
		components: {
			DiyNav,
			Search,
			empty
		},
		data() {
			return {
				placeHolder:'请输入搜索关键词',
				show_remove:false,
				show:false,
				list: [],
				count: 0,
				total:0,
				page:1,
				size:6,
				more_data:true,
				search_history_arr:[],
				_remove:false,
				search_val:'',
				loaded:false,
				lat:'',
				lng:'',
				min_height:''
			}
		},
		
		onLoad(option) {
			// this.getList()
			this.lat = option.lat;
			this.lng= option.lng;
			// this.lat='29.657024561061068';
			// this.lng='106.66570010595024'
			this.getHistory();
			let that = this;
			uni.getSystemInfo({
				success:function(res){
					that.min_height=res.windowHeight*2-56*2-res.statusBarHeight*2+'rpx'
				}
			})
		},
		// 页面触底事件，加载下一页
		onReachBottom() {
			this.getList();
		},
		
		methods: {
			entranContent(index){
				// if(this.show_remove){
				// 	this.search_history_arr[index]._remove=!this.search_history_arr[index]._remove
				// }else{
				// 	let val =this.search_history_arr[index].title;
				// 	this.search_val=val;
				// 	this.$refs.searchBarRef.searchValue=val;
				// 	this.doConfirm(val)
				// }
				let val =this.search_history_arr[index].title;
				
				this.search_val=val;
				this.doConfirm(val)
				
			},
			cancelSearch(){
				this.show=true;
			},
			clickRemove(){
				// if(this.search_history_arr.length>0) this.show_remove=true;
				uni.removeStorage({
					key:'s_history'
				});
				this.search_history_arr=[]
			},
			saveHistory(value){
				var exists = this.checkValue(this.search_history_arr,'title', value);
				if(!exists&&value){
					this.search_history_arr.push({title:value,_remove:false});
					uni.setStorage({
						key:'s_history',
						data:this.search_history_arr
					})
				}
			},
			getHistory(){
				const _v =uni.getStorageSync('s_history');
				if(_v) this.search_history_arr = _v;
				// console.log(_v)
			},
			
			doConfirm(res){
				if(res.value||res.value=='') this.search_val=res.value;
				this.page=1;
				this.show=false;
				
				this.more_data=true;
				this.saveHistory(this.search_val)
				this.list =[];
				// this.total=0;
				this.getList()
			},
			
			async getList() {
				
				if(!this.more_data){
					return;
				}
				
				let params = {
					page: this.page,
					size: this.size,
					key_word:this.search_val,
					lat:this.lat,
					lng:this.lng
				}
				let data = await Api.apiCall('get', Api.apiName.course_list, params,true);
				if(!data||data.data.list.length==0){
					this.loaded=true;
					return;
				}
				this.list = this.list.concat(data.data.list);
				this.loaded=true;
				// this.total = data.data.total;
				if(data.data.list.length>0&&data.data.list.length==this.size){
					this.page++;
					this.more_data=true;
					return;
				}
				this.more_data=false;
				
			
			},			
			checkValue(arr, key, value){
				for (let i = 0; i < arr.length; i++) {
				    if (arr[i][key] === value) {
				      return true;
				    }
				  }
				  return false;
			},
			remove_s(index){
				this.$api.msg(`121321`)
			},
			toDetailText(id){
				uni.navigateTo({
					url:'/pages/course/detail_text?id='+id
				})
			},
		},

	}
</script>

<style lang='scss'>
	page {
		background: #fff;
	}
	.container{
		display: flex;
		flex-direction: column;
		/* height: 100vh; */
	}
	.header-top{
		height: 320rpx;
	}
	.bottom-box{
		/* flex: 1; */
		width: 100%;
		overflow-y: auto;
		background: #F5F5F5;
		/* height: 100vh; */
	}
	.s_history{
		display: flex;
		align-items: center;
		position: fixed;
		z-index: 2;
		top: 120rpx;
		width: 100%;
	}
	.s_stitle{
		display: flex;
		justify-content: flex-start;
		padding: 4rpx 20rpx;
	}
	.s_sicon{
		display: flex;
		justify-content: flex-end;
		flex: 1;
		padding-right: 20rpx;
	}
	.s_s_content{
		padding: 4rpx 20rpx;
		position: fixed;
		top: 180rpx;
		z-index:2;
	}
	.s_s_content_child{
		background: #EEEEEE;
		border-radius: 20rpx;
		margin: 10rpx 23rpx 10rpx 4rpx;
		float: left;
		padding: 20rpx 33rpx;
		font-size: 22rpx;
		color: #000000;
		text-align: center;
		font-weight: 800;
		opacity: 0.9;
		&.remove{
			background: #c9cae4 !important;
		}
		
	}
	
	::-webkit-scrollbar{
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}
	.uni-searchbar__box {
		background-color: #FFFFFF !important;
		border: 1px solid rgba(204, 204, 204, 0.5);
	}
	
	.player_btn{
		position: absolute;
		top:50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	.empty_data{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		opacity: 0.5;
		color: #999;
		position: fixed;
		left: 0rpx;
		right: 0rpx;
	}
	.list-item {
		display: flex;
		background: #FFFFFF;
		margin: 12rpx;
		border-radius: 20rpx;
	}
	
	.list-img {
		/* padding: 20rpx; */
		margin: 20rpx;
		position: relative;
		width: 252rpx;
		height: 252rpx;
		image {
			width: 252rpx;
			height: 252rpx;
			border-radius: 20rpx;
		}
	}
	
	.status-tag {
		position: absolute;
		z-index: 2;
		bottom: 0rpx;
		background: rgba(0, 0, 0, 0.5);
		width: 252rpx;
		text-align: center;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		color: #FFFFFF;
	}
	
	.list-title {
		/* margin-left: 20rpx; */
		/* margin-top: 30rpx; */
		font-size: 28rpx;
		width: 100%;
		margin: 20rpx;
	}
	
	.list-title-name {
		font-size: 30rpx;
		font-weight: 600
	}
	
	.list-detail {
		display: flex;
		color: #999999;
		margin-top: 24rpx;
	}
	
	.list-date {
		color: #999999;
		margin-top: 24rpx
	}
	
	.list-op {
		margin-top: 30rpx;
		display: flex;
		color: #ff0000;
		align-items: center;
	}
	
	.pad-r22 {
		padding-right: 22rpx;
	}
	
	.font-w600 {
		font-weight: 600;
	}
	
	.sign-coin-detail {
		margin-left: 14rpx;
		font-size: 22rpx;
		border: 1px solid #ff0000;
		padding: 4rpx
	}
	
</style>